import React, { useEffect, useState } from 'react'
import { Form, Button, Table, Tag, Switch, message, Select, Cascader } from 'antd'
import { CityOption } from '../../utils/china'
import {
    getHouseList,
    apiDelHouseList,
    upSwitchState,
    apiSearchHouse,

} from '../../api'

import Style from './index.module.scss'

import { useNavigate } from 'react-router-dom'

const { Option } = Select;

const Index = () => {

    const navigate = useNavigate()//跳转路由

    const [vis, setVis] = useState(true)

    // 存放房源管理 销售楼盘数据
    const [data, setData] = useState([])
    //  存放房源管理 租售楼盘数据
    // const [datas, setDatas] = useState([])
    useEffect(() => {
        getHouseList({ type: 0 }).then(res => {
            setData(res.data.data)
        })
    }, [])


    // 新增事件
    const AddHouse = (record: any) => {

        if (record.id) {
            navigate('/addHouse', { state: record })
        } else {
            navigate('/addHouse')
        }
    }



    // 删除事件
    const delHouseList = (record: any) => {
        vis
            ? apiDelHouseList({ id: record.id, state: '' }).then(res => {
                setData(res.data.data)
            })
            : apiDelHouseList({ id: record.id, state: '正常' }).then(res => {
                setData(res.data.data)
            })
    }

    // 更改switch事件
    const toOnChange = (record: any) => {
        upSwitchState({ id: record.id }).then((res: any) => {
            message.success(res.data.msg)
            setData(res.data.data)
        })

    }

    const column = vis ? [
        {
            title: '序号',
            dataIndex: 'id',
            width: '10%',
            editable: true,
            render: (text: any, record: any, index: number) => {
                return index + 1
            },
        },
        {
            title: '楼盘名称',
            dataIndex: 'name',
            width: '12%',
            editable: true,
        },
        {
            title: '详细地址',
            dataIndex: 'address',
            width: '20%',
            editable: true,
        }, {
            title: '价格',
            dataIndex: 'price',
            width: '15%',
            editable: true,
        }, {
            title: '排序',
            dataIndex: 'sort',
            width: '10%',
            editable: true,
        }, {
            title: '更新时间',
            dataIndex: 'time',
            width: '10%',
            editable: true,
        }, {
            title: '状态',
            dataIndex: 'state',
            width: '8%',
            editable: true,
        }, {
            title: '经纪人',
            dataIndex: 'broker',
            width: '8%',
            editable: true,
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_: any, record: any) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <Tag color="magenta">详情</Tag>
                        <Tag color="volcano" onClick={() => AddHouse(record)}>编辑</Tag>
                        <Tag color="red" onClick={() => delHouseList(record)}>删除</Tag>
                        <Tag color="gold">指派经纪人</Tag>
                    </div >
                )
            },
        },
    ] : [
        {
            title: '序号',
            dataIndex: 'id',
            width: '10%',
            editable: true,
            render: (text: any, record: any, index: number) => {
                return index + 1
            },
        },
        {
            title: '楼盘名称',
            dataIndex: 'name',
            width: '12%',
            editable: true,
        },
        {
            title: '详细地址',
            dataIndex: 'address',
            width: '15%',
            editable: true,
        }, {
            title: '租金',
            dataIndex: 'rent',
            width: '15%',
            editable: true,
        }, {
            title: '排序',
            dataIndex: 'sort',
            width: '10%',
            editable: true,
        }, {
            title: '更新时间',
            dataIndex: 'time',
            width: '10%',
            editable: true,
        }, {
            title: '状态',
            // dataIndex: 'state',
            width: '8%',
            editable: true,
            render: (text: any, record: any) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <Switch
                            checkedChildren="正常"
                            // unCheckedChildren="关闭" 
                            defaultChecked
                            onChange={() => toOnChange(record)}
                        />
                    </div>
                )
            },

        }, {
            title: '经纪人',
            dataIndex: 'broker',
            width: '8%',
            editable: true,
        },
        {
            title: '操作',
            render: (_: any, record: any) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <Tag color="magenta">详情</Tag>
                        <Tag color="volcano" onClick={() => AddHouse(record)}>编辑</Tag>
                        <Tag color="red" onClick={() => delHouseList(record)}>删除</Tag>
                        <Tag color="gold">指派经纪人</Tag>
                    </div >
                )
            },
        },
    ];

    // 房屋租赁 点击事件
    const houseRent = () => {
        setVis(false)
        getHouseList({ type: 1 }).then(res => {
            setData(res.data.data)
        })
    }
    // 销售楼盘 点击事件
    const houseSale = () => {
        setVis(true)
        getHouseList({ type: 0 }).then(res => {
            setData(res.data.data)
        })
    }


    //级联选择
    const [ThreeValue, setThreeValue] = useState<any>({})
    const onChange = (value: any) => {

        let list: any = {}
        // 转换对象格式
        for (var key in value) {
            list[key] = value[key];
        }

        setThreeValue(list);
    }

    // 搜索事件
    const SearchFinish = (value: any) => {

        vis
            ? apiSearchHouse({
                province: ThreeValue[0],
                district: '',
                county: ThreeValue[2],
                state: ''
            }).then((res: any) => {
                if (res.data.data.length === 0) {
                    message.error('占时没有数据')
                    setData(res.data.data)
                } else {
                    message.success('查询成功')
                    setData(res.data.data)
                }
                onChange(ThreeValue)
            })
            : apiSearchHouse({
                province: ThreeValue[0],
                district: '',
                county: ThreeValue[2],
                state: '正常'
            }).then((res: any) => {
                if (res.data.data.length === 0) {
                    message.error('占时没有数据')
                    setData(res.data.data)
                } else {
                    message.success('查询成功')
                    setData(res.data.data)
                }
            })
    }

    return (
        <div>
            <Button onClick={() => houseSale()}
                style={{ marginRight: '10px' }}
            >销售楼盘</Button>
            <Button onClick={() => houseRent()}>房屋租赁</Button>


            {/* 销售楼盘头部 */}
            {
                <div className={Style.box}>
                    <div style={{ display: 'flex', height: 'auto', marginTop: '15px' }}>

                        {/* 三级联动 */}
                        <Cascader options={CityOption} onChange={onChange} placeholder="请选择城市数据" fieldNames={{ label: 'name', value: 'name', children: 'children' }} />


                        <Button style={{ marginLeft: '10px' }} onClick={SearchFinish}>
                            搜素
                        </Button>

                        {/* 新增 */}
                        <Button type="primary"
                            onClick={AddHouse}
                            style={{ marginLeft: '10px' }}
                        >
                            新增
                        </Button>
                    </div>
                    {/* tab */}
                    <div className={Style.boxdiv}>
                        <Form component={false}>
                            <Table
                                style={{ height: '100%' }}
                                columns={column}
                                dataSource={data}
                                rowKey="id"
                            />
                        </Form>
                    </div>
                </div>

            }

        </div >
    )
}

export default Index

